<template>
  <Scroll class="wriper_left">
    <div class="left">
      <div
        class="left_item"
        v-for="(item, index) in left_datas"
        :key="index"
        @click="left_click(index, item.maitKey)"
        :class="{ white: index == curren_index }"
      >
        <i :class="{ show_i: index == curren_index }"></i>
        {{ item.title }}
      </div>
    </div>
  </Scroll>
</template>

<script>
import Scroll from "@/components/scroll/Scroll.vue"

export default {
  name: "Left",
  props: {
    left_datas: {
      type: Array,
      default: [],
    },
  },
  data() {
    return {
      curren_index: 0,
    }
  },
  components: {
    Scroll,
  },
  methods: {
    //点击左边框
    left_click(index, maitkey) {
      this.curren_index = index

      this.$emit("send_left", maitkey)
    },
  },
}
</script>

<style lang="less" scoped>
.wriper_left {
  flex: 3;
  height: calc(100vh - 45px - 45px);
  background-color: #f6f6f6;
  .left_item {
    position: relative;
    height: 12vw;
    line-height: 12vw;
    text-align: center;
    font-size: 3.73333vw;
    i {
      position: absolute;
      left: 0;
      top: 0;
      width: 2px;
      height: 100%;
      background-color: #ff5777;
      display: none;
    }
  }
}

.show_i {
  display: inline-block !important;
}

.white {
  background-color: #fff;
}
</style>
